<template>
  <div class="records">
    <!-- 标题 -->
    <div class="records_title">
      <div class="records_title_left">
        <el-dropdown @command="handleCommand">
          <div class="el-dropdown-link">
            {{ proname }}
            <img src="../../assets/images/cut.png" alt class="cut" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in project"
              :key="item.id"
              :command="item.id"
              >{{ item.projectName }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="records_title_right">
        <el-date-picker
          v-model="value1"
          class="work_date"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeTime"
        ></el-date-picker>
      </div>
    </div>
    <!-- 所有搜索框 -->
    <div class="records_input">
      <el-form :inline="true" class="demo_ruleForm">
        <el-form-item
          label="任务编号:"
          prop="taskNumber"
          class="recordsForm_input"
        >
          <el-input
            v-model="maintainQuery.taskNumber"
            placeholder="请输入任务编号"
            clearable
            @change="getrepairSearch"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="维修单号:"
          prop="workOrderNumber"
          class="recordsForm_input"
        >
          <el-input
            v-model="maintainQuery.workOrderNumber"
            placeholder="请输入维修单号"
            clearable
            @change="getrepairSearch"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="设备编号:"
          prop="deviceNumber"
          class="recordsForm_input"
        >
          <el-input
            v-model="maintainQuery.deviceNumber"
            placeholder="请输入设备编号"
            clearable
            @change="getrepairSearch"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工编号:" prop="jobNo" class="recordsForm_input">
          <el-input
            v-model="maintainQuery.jobNo"
            placeholder="请输入员工编号"
            clearable
            @change="getrepairSearch"
          ></el-input>
        </el-form-item>
        <el-form-item label="维修人:" prop="realName" class="recordsForm_input">
          <el-input
            v-model="maintainQuery.realName"
            placeholder="请输入维修人"
            clearable
            @change="getrepairSearch"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="sure_serch" @click="getrepairSearch"
            >确认搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <el-table
      :data="maintainList"
      border
      class="records_table"
      :header-cell-style="{ background: '#FAFAFA', color: '#606266' }"
    >
      <el-table-column prop="no" label="序号" width="80"></el-table-column>
      <el-table-column prop="taskNumber" label="任务编号" width="180">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.taskNumber == null" style="color: red"
              >暂无数据</span
            >
            <span v-else>{{ scoped.row.taskNumber }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="workOrderNumber" label="维修单号" width="160">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.workOrderNumber == null" style="color: red"
              >暂无数据</span
            >
            <span v-else>{{ scoped.row.workOrderNumber }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="deviceNumber" label="设备编号" width="230">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.deviceNumber == null" style="color: red"
              >暂无数据</span
            >
            <span v-else>{{ scoped.row.deviceNumber }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="duration" label="维修时长(h)">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.duration == null" style="color: red"
              >暂无数据</span
            >
            <span v-else>{{ scoped.row.duration }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="jobNo" label="员工编号">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.jobNo == null" style="color: red"
              >暂无数据</span
            >
            <span v-else>{{ scoped.row.jobNo }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="realName	" label="维修人">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.realName == null" style="color: red"
              >暂无数据</span
            >
            <span v-else>{{ scoped.row.realName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="addPerson" label="提交人">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.addPerson == null" style="color: red"
              >暂无数据</span
            >
            <span v-else>{{ scoped.row.addPerson }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="add_time" label="提交时间" width="250">
        <template slot-scope="scoped">
          <div>
            <span v-if="scoped.row.add_time == null" style="color: red"
              >暂无数据</span
            >
            <span v-else>{{ scoped.row.add_time }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="280">
        <template slot-scope="scoped">
          <div>
            <el-button
              type="warning"
              size="small"
              @click="
                showlookDetial(
                  scoped.row.orderId,
                  scoped.row.deviceId,
                  scoped.row.id
                )
              "
              >查看维修详情</el-button
            >
            <el-button
              type="success"
              size="small"
              @click="showpriners(scoped.row.orderId)"
              >查看配件</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination" style="margin-bottom: 20px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="maintainQuery.pageSize"
        :current-page="maintainQuery.pageNumber"
        layout="total, sizes, prev, pager, next, jumper"
        :total="maintaintotal"
        class="management_page"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { getProject, repairSearch } from "../../utils/api";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      // 表格的数据
      maintainList: [],
      recordsListForm: {
        name: ""
      },
      value1: null,
      // 项目id
      value: "",
      project: [], //项目列表
      //   分页
      maintainQuery: {
        projectId: "",
        pageSize: 10,
        pageNumber: 1,
        taskNumber: "",
        workOrderNumber: "",
        deviceNumber: "",
        jobNo: "",
        realName: "",
        startTime: "",
        endTime: ""
      },
      //保养列表的总条数
      maintaintotal: 0
    };
  },
  async created() {
    this.value = window.localStorage.getItem("projectId");
    await this.getDataInit();
  },
  computed: {
    ...mapState(["org_id"]),
    proname() {
      if (this.project.length == 0) {
        return "";
      }
      const index = this.project.filter(v => v.id == this.value)[0];
      return index["projectName"];
    }
  },
  watch: {
    org_id(val) {
      this.maintainQuery.pageNumber = 1;
      window.localStorage.removeItem("projectId");
      this.getProject();
    }
  },
  methods: {
    getDataInit() {
      if (this.org_id === "" || this.org_id === null || !this.org_id) {
      } else {
        this.getProject();
      }
    },
    //获取项目列表
    getProject() {
      this.postRequest(getProject, { companyId: this.org_id }).then(res => {
        if (res.code === 200) {
          this.project = res.data;
          if (res.data.length > 0) {
            if (
              window.localStorage.getItem("projectId") == "" ||
              window.localStorage.getItem("projectId") == null
            ) {
              this.value = res.data[0].id;
            }
            this.getrepairSearch(); //获取数据
          } else {
            this.value = "";
            this.maintainList = [];
          }
        } else {
          this.project = [];
          this.value = "";
        }
      });
    },
    handleCommand(command) {
      this.value = command;
      window.localStorage.setItem("projectId", this.value);
      this.getrepairSearch();
    },
    //获取保养记录列表
    getrepairSearch() {
      this.maintainQuery.projectId = this.value;
      this.postRequest(repairSearch, this.maintainQuery).then(res => {
        if (res.code == 200) {
          this.maintainList = res.data.data;
          this.maintaintotal = res.data.count;
        }
      });
    },
    // 点击查看跳转到保养记录详情
    showlookDetial(orderId, deviceId, id) {
      this.$router.push("/MaintainDetial");
      window.sessionStorage.setItem("orderId", orderId);
      window.sessionStorage.setItem("id", id);

      window.sessionStorage.setItem("deviceId", deviceId);
      window.sessionStorage.setItem("productId", this.maintainQuery.projectId);
    },
    // 查看配件
    showpriners(orderId) {
      this.$router.push("/shoparints");

      window.sessionStorage.setItem("orderId", orderId);
    },
    // 点击选择时间调用的函数
    changeTime(value) {
      if (this.value1 == "" || this.value1 == null || this.value1 == []) {
        this.maintainQuery.startTime = "";
        this.maintainQuery.endTime = "";
        this.getrepairSearch();
      } else {
        this.maintainQuery.startTime = value[0];
        this.maintainQuery.endTime = value[1];
        this.getrepairSearch();
      }
    },
    // 分页
    handleSizeChange(val) {
      this.maintainQuery.pageSize = val;
      this.getrepairSearch();
    },
    handleCurrentChange(val) {
      this.maintainQuery.pageNumber = val;
      this.getrepairSearch();
    }
  }
};
</script>
<style lang="less">
.records {
  padding: 20px;
  // 保养记录
  .records_title {
    border: 1px solid #eaedf3;
    padding: 10px 20px;
    display: flex;
    flex-direction: row;
    .records_title_left {
      margin-top: 12px;
      .el-dropdown-link {
        display: flex;
        align-items: center;
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(62, 63, 66, 1);
        cursor: pointer;
      }

      // 标题
      .cut {
        width: 20px;
        height: 20px;
        margin-left: 10px;
        display: block;
      }
    }
    .records_title_right {
      margin-left: auto;
      .records_rili {
        margin-right: 15px;
      }
    }
  }
  .records_input {
    border: 1px solid #eaedf3;
    margin: 20px 0;
    .demo_ruleForm {
      margin-top: 20px;
      padding-left: 10px;
      .el-form-item__label {
        color: #9ea0a5;
      }
    }
  }
  .records_table {
  }
}
</style>
